<script setup>
import { ref, onMounted } from 'vue';
import { queryAllApi } from "@/api/user";
import { ElMessage } from 'element-plus'
import router from '@/router'


const form = ref({
  name: '',
  gender: '',
});


//最终结果存放地
const userList = ref("");

//传给后端的参数，分页参数
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

//传参加上赋值
const list = async () => {
  const result = await queryAllApi(
    form.value.name,
    form.value.gender,
    currentPage.value,
    pageSize.value
  );


  //userList
  userList.value = result.data;
  total.value = result.total;
};


const handleSizeChange = (val) => {
  currentPage.value = 1;
  list();
};


const handleCurrentChange = (val) => {
  list();
};


const down = () => {
  const num = total.value / pageSize.value;
  if (currentPage.value < num) currentPage.value = currentPage.value + 1;
  list();
};



const up = () => {
  if (currentPage.value > 1) currentPage.value = currentPage.value - 1;
  list();
};
const clear = () => {
  form.value = {
    name: "",
    gender: "",
  };
    list();
};
onMounted(() => {
  list();
});
</script>


<template>


  <el-form :inline="true" :model="form" class="demo-form-inline">
    <el-form-item label="姓名">
      <el-input v-model="form.name" placeholder="姓名" clearable />
    </el-form-item>
    <el-form-item label="" style="width: 100px">
      <el-select v-model="form.gender" placeholder="性别" clearable>
        <el-option label="男" value="1" />
        <el-option label="女" value="2" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="list">查询</el-button>
      <el-button type="primary" @click="clear">清空</el-button>
    </el-form-item>
  </el-form>





  <el-table :data="userList" border height="250">
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="gender" label="性别" width="180">
      <template #default="scope">
        {{ scope.row.gender == 1 ? "男" : "女" }}
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="创建日期" />
  </el-table>


  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[5, 10, 15, 20]"
    :disabled="disabled"
    :background="background"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />


  <el-button type="primary" @click="up">上一页</el-button>
  <el-button type="primary" @click="down">下一页</el-button>
</template>
 <style scoped>
</style>